<template>
  <div class="diagnosis-management-view">
    <div class="container">
      <!-- 左侧随访记录列表 -->
      <div class="left-panel">
        <div class="panel-header">
          <span class="panel-title">请选择随访方案</span>
          <el-button type="primary" size="small" class="add-btn">+新增</el-button>
        </div>
        
        <div class="followup-list">
          <div class="followup-item" v-for="(item, index) in followupList" :key="index">
            <div class="followup-select">
              <input type="radio" :id="`followup-${index}`" :name="'followup'" :checked="index === 1" />
              <label :for="`followup-${index}`">{{ item.date }}</label>
            </div>
            <div class="followup-title">{{ item.title }}</div>
            <div class="followup-status">{{ item.status }}</div>
          </div>
        </div>
      </div>
      
      <!-- 右侧详细记录表 -->
      <div class="right-panel">
        <div class="form-header">
          <h2 class="form-title">高血压一级管理随访记录表</h2>
          <div class="form-info">
            <span class="patient-name">姓名：李琴</span>
            <span class="form-code">编号：</span>
            <div class="code-input-group">
              <input type="text" maxlength="4" class="code-input" placeholder="" />
              <span class="code-separator">-</span>
              <input type="text" maxlength="4" class="code-input" placeholder="" />
            </div>
          </div>
        </div>
        
        <div class="form-content">
          <!-- 随访日期和方式 -->
          <div class="form-row">
            <div class="form-item">
              <label class="form-label">随访日期</label>
              <div class="form-control">
                <span class="date-value">2022-10-09</span>
                <el-button class="date-edit-btn" size="small" icon="el-icon-edit"></el-button>
              </div>
            </div>
            <div class="form-item">
              <label class="form-label">随访方式</label>
              <div class="radio-group">
                <label class="radio-item">
                  <input type="radio" name="visitType" value="门诊">门诊
                </label>
                <label class="radio-item">
                  <input type="radio" name="visitType" value="家庭">家庭
                </label>
                <label class="radio-item">
                  <input type="radio" name="visitType" value="电话">电话
                </label>
              </div>
            </div>
          </div>
          
          <!-- 症状 -->
          <div class="form-section">
            <label class="form-label">症状</label>
            <div class="checkbox-group">
              <label class="checkbox-item">
                <input type="checkbox" value="无症状">无症状
              </label>
              <label class="checkbox-item">
                <input type="checkbox" value="有症状">有症状
              </label>
              <label class="checkbox-item">
                <input type="checkbox" value="头痛">头痛
              </label>
              <label class="checkbox-item">
                <input type="checkbox" value="头晕">头晕
              </label>
              <label class="checkbox-item">
                <input type="checkbox" value="耳鸣">耳鸣
              </label>
              <label class="checkbox-item">
                <input type="checkbox" value="恶心">恶心
              </label>
              <label class="checkbox-item">
                <input type="checkbox" value="呕吐">呕吐
              </label>
              <label class="checkbox-item">
                <input type="checkbox" value="心悸">心悸
              </label>
              <label class="checkbox-item">
                <input type="checkbox" value="胸闷">胸闷
              </label>
              <label class="checkbox-item">
                <input type="checkbox" value="呼吸困难">呼吸困难
              </label>
              <label class="checkbox-item">
                <input type="checkbox" value="四肢发麻">四肢发麻
              </label>
              <label class="checkbox-item">
                <input type="checkbox" value="下肢水肿">下肢水肿
              </label>
              <label class="checkbox-item">
                <input type="checkbox" value="鼻出血不止">鼻出血不止
              </label>
            </div>
          </div>
          
          <!-- 体征表格 -->
          <div class="table-section">
            <table class="data-table">
              <thead>
                <tr>
                  <th class="table-header" colspan="2">体征</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="table-label">血压(mmHg)</td>
                  <td class="table-input">
                    <input type="text" placeholder="请输入舒张压" class="data-input" />
                    <span class="separator">/</span>
                    <input type="text" placeholder="请输入收缩压" class="data-input" />
                  </td>
                </tr>
                <tr>
                  <td class="table-label">体重(kg)</td>
                  <td class="table-input">
                    <input type="text" placeholder="请输入当前体重" class="data-input" />
                    <span class="separator">/</span>
                    <input type="text" placeholder="请输入目标体重" class="data-input" />
                  </td>
                </tr>
                <tr>
                  <td class="table-label">体质指数(kg/m²)</td>
                  <td class="table-input">
                    <input type="text" placeholder="请输入当前体质指数" class="data-input" />
                    <span class="separator">/</span>
                    <input type="text" placeholder="请输入目标体质指数" class="data-input" />
                  </td>
                </tr>
                <tr>
                  <td class="table-label">心率</td>
                  <td class="table-input">
                    <input type="text" placeholder="请输入当前心率" class="data-input" />
                    <span class="separator">/</span>
                    <input type="text" placeholder="请输入目标心率" class="data-input" />
                  </td>
                </tr>
                <tr>
                  <td class="table-label">其他</td>
                  <td class="table-input">
                    <input type="text" placeholder="" class="data-input large-input" />
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 生活方式指导表格 -->
          <div class="table-section">
            <table class="data-table">
              <thead>
                <tr>
                  <th class="table-header" colspan="2">生活方式指导</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="table-label">日吸烟量</td>
                  <td class="table-input">
                    <input type="text" placeholder="请输入当前吸烟量" class="data-input" />
                    <span class="separator">/</span>
                    <input type="text" placeholder="请输入目标吸烟量" class="data-input" />
                    <span class="unit">支</span>
                  </td>
                </tr>
                <tr>
                  <td class="table-label">日饮酒量</td>
                  <td class="table-input">
                    <input type="text" placeholder="请输入当前饮酒量" class="data-input" />
                    <span class="separator">/</span>
                    <input type="text" placeholder="请输入目标饮酒量" class="data-input" />
                    <span class="unit">两</span>
                  </td>
                </tr>
                <tr>
                  <td class="table-label">运动</td>
                  <td class="table-input">
                    <input type="text" placeholder="请输入当前运动频次" class="data-input" />
                    <span class="unit">次/周</span>
                    <input type="text" placeholder="请输入当前运动时长" class="data-input" />
                    <span class="unit">分钟/次</span>
                  </td>
                </tr>
                <tr>
                  <td class="table-label"></td>
                  <td class="table-input">
                    <input type="text" placeholder="请输入目标运动频次" class="data-input" />
                    <span class="unit">次/周</span>
                    <input type="text" placeholder="请输入目标运动时长" class="data-input" />
                    <span class="unit">分钟/次</span>
                  </td>
                </tr>
                <tr>
                  <td class="table-label">摄盐情况</td>
                  <td class="table-input">
                    <span class="label-text">目前：</span>
                    <label class="radio-item">
                      <input type="radio" name="currentSaltIntake" value="轻(6g)">轻(6g)
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="currentSaltIntake" value="中(6-12g)">中(6-12g)
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="currentSaltIntake" value="重(>12g)">重(>12g)
                    </label>
                    <span class="label-text">目标：</span>
                    <label class="radio-item">
                      <input type="radio" name="targetSaltIntake" value="轻(6g)">轻(6g)
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="targetSaltIntake" value="中(6-12g)">中(6-12g)
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="targetSaltIntake" value="重(>12g)">重(>12g)
                    </label>
                  </td>
                </tr>
                <tr>
                  <td class="table-label">心理调整</td>
                  <td class="table-input">
                    <span class="label-text">目前：</span>
                    <label class="radio-item">
                      <input type="radio" name="currentPsychological" value="良好">良好
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="currentPsychological" value="一般">一般
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="currentPsychological" value="差">差
                    </label>
                    <span class="label-text">目标：</span>
                    <label class="radio-item">
                      <input type="radio" name="targetPsychological" value="良好">良好
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="targetPsychological" value="一般">一般
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="targetPsychological" value="差">差
                    </label>
                  </td>
                </tr>
                <tr>
                  <td class="table-label">遵医行为</td>
                  <td class="table-input">
                    <span class="label-text">目前：</span>
                    <label class="radio-item">
                      <input type="radio" name="currentCompliance" value="良好">良好
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="currentCompliance" value="一般">一般
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="currentCompliance" value="差">差
                    </label>
                    <span class="label-text">目标：</span>
                    <label class="radio-item">
                      <input type="radio" name="targetCompliance" value="良好">良好
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="targetCompliance" value="一般">一般
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="targetCompliance" value="差">差
                    </label>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 用药情况表格 -->
          <div class="table-section">
            <table class="data-table">
              <thead>
                <tr>
                  <th class="table-header" colspan="2">用药情况</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="table-label">服药依从性</td>
                  <td class="table-input">
                    <span class="label-text">目前：</span>
                    <label class="radio-item">
                      <input type="radio" name="currentAdherence" value="规律">规律
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="currentAdherence" value="间断">间断
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="currentAdherence" value="不服药">不服药
                    </label>
                    <span class="label-text">目标：</span>
                    <label class="radio-item">
                      <input type="radio" name="targetAdherence" value="规律">规律
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="targetAdherence" value="间断">间断
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="targetAdherence" value="不服药">不服药
                    </label>
                  </td>
                </tr>
                <tr>
                  <td class="table-label">药物不良反应</td>
                  <td class="table-input">
                    <label class="radio-item">
                      <input type="radio" name="adverseReaction" value="无">无
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="adverseReaction" value="有">有
                    </label>
                  </td>
                </tr>
                <tr>
                  <td class="table-label">低血糖反应</td>
                  <td class="table-input">
                    <label class="radio-item">
                      <input type="radio" name="hypoglycemiaReaction" value="无">无
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="hypoglycemiaReaction" value="偶尔">偶尔
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="hypoglycemiaReaction" value="频繁">频繁
                    </label>
                  </td>
                </tr>
                <tr>
                  <td class="table-label">此次随访分类</td>
                  <td class="table-input">
                    <label class="radio-item">
                      <input type="radio" name="followupCategory" value="控制满意">控制满意
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="followupCategory" value="控制不满意">控制不满意
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="followupCategory" value="不良反应">不良反应
                    </label>
                    <label class="radio-item">
                      <input type="radio" name="followupCategory" value="并发症">并发症
                    </label>
                  </td>
                </tr>
                <tr>
                  <td class="table-label">药物名称1</td>
                  <td class="table-input">
                    <input type="text" placeholder="请输入药物名称" class="data-input large-input" />
                    <span class="label-text">每日</span>
                    <input type="text" placeholder="请输入" class="data-input small-input" />
                    <span class="label-text">次</span>
                    <span class="label-text">每次</span>
                    <input type="text" placeholder="请输入" class="data-input small-input" />
                  </td>
                </tr>
                <tr>
                  <td class="table-label">药物名称2</td>
                  <td class="table-input">
                    <input type="text" placeholder="请输入药物名称" class="data-input large-input" />
                    <span class="label-text">每日</span>
                    <input type="text" placeholder="请输入" class="data-input small-input" />
                    <span class="label-text">次</span>
                    <span class="label-text">每次</span>
                    <input type="text" placeholder="请输入" class="data-input small-input" />
                  </td>
                </tr>
                <tr>
                  <td class="table-label">药物名称3</td>
                  <td class="table-input">
                    <input type="text" placeholder="请输入药物名称" class="data-input large-input" />
                    <span class="label-text">每日</span>
                    <input type="text" placeholder="请输入" class="data-input small-input" />
                    <span class="label-text">次</span>
                    <span class="label-text">每次</span>
                    <input type="text" placeholder="请输入" class="data-input small-input" />
                  </td>
                </tr>
                <tr>
                  <td class="table-label">药物名称4</td>
                  <td class="table-input">
                    <input type="text" placeholder="请输入药物名称" class="data-input large-input" />
                    <span class="label-text">每日</span>
                    <input type="text" placeholder="请输入" class="data-input small-input" />
                    <span class="label-text">次</span>
                    <span class="label-text">每次</span>
                    <input type="text" placeholder="请输入" class="data-input small-input" />
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 转诊表格 -->
          <div class="table-section">
            <table class="data-table">
              <thead>
                <tr>
                  <th class="table-header" colspan="2">转诊</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="table-label">原因</td>
                  <td class="table-input">
                    <input type="text" placeholder="请输入转诊原因" class="data-input large-input" />
                  </td>
                </tr>
                <tr>
                  <td class="table-label">机构及科别</td>
                  <td class="table-input">
                    <input type="text" placeholder="请输入转入机构及转入科室" class="data-input large-input" />
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 下次随访时间 -->
          <div class="form-row">
            <div class="form-item full-width">
              <label class="form-label">下次随访时间</label>
              <div class="form-control">
                <span class="date-value">2022-12-09</span>
                <el-button class="date-edit-btn" size="small" icon="el-icon-edit"></el-button>
              </div>
            </div>
          </div>
          
          <!-- 随访医生签名 -->
          <div class="form-row">
            <div class="form-item">
              <label class="form-label">随访医生签名</label>
              <div class="form-control">
                <select class="doctor-select">
                  <option value="李琴">李琴</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 模拟随访记录数据
const followupList = ref([
  {
    date: '2023-05-15',
    title: '高血压确诊随访',
    status: '已完成'
  },
  {
    date: '2023-05-15',
    title: '高血压确诊随访',
    status: '已完成'
  },
  {
    date: '2023-05-15',
    title: '高血压确诊随访',
    status: '已完成'
  },
  {
    date: '2023-05-15',
    title: '高血压确诊随访',
    status: '已完成'
  },
  {
    date: '2023-05-15',
    title: '高血压确诊随访',
    status: '已完成'
  },
  {
    date: '2023-05-15',
    title: '高血压确诊随访',
    status: '已完成'
  }
])
</script>

<style scoped>
.diagnosis-management-view {
  height: 100vh;
  background-color: #f0f2f5;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 左侧面板 */
.left-panel {
  width: 200px;
  background: #f5f7fa;
  border-right: 1px solid #e0e4e8;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 15px;
  border-bottom: 1px solid #e0e4e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f7fa;
}

.panel-title {
  font-size: 14px;
  font-weight: bold;
  color: #303133;
}

.add-btn {
  font-size: 12px;
  padding: 2px 8px;
}

.followup-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.followup-item {
  padding: 12px 15px;
  border-bottom: 1px solid #e0e4e8;
  cursor: pointer;
  background: #ffffff;
  transition: all 0.2s;
}

.followup-item:hover {
  background: #f5f7fa;
}

.followup-select {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.followup-select input[type="radio"] {
  margin-right: 8px;
}

.followup-select label {
  font-size: 13px;
  color: #303133;
  margin: 0;
}

.followup-title {
  font-size: 12px;
  color: #606266;
  margin-bottom: 4px;
  margin-left: 20px;
}

.followup-status {
  font-size: 12px;
  color: #67c23a;
  margin-left: 20px;
}

/* 右侧面板 */
.right-panel {
  flex: 1;
  background: white;
  overflow-y: auto;
  padding: 20px;
}

.form-header {
  text-align: center;
  margin-bottom: 30px;
  border-bottom: 1px solid #e0e4e8;
  padding-bottom: 20px;
}

.form-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 15px;
}

.form-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  font-size: 14px;
  color: #303133;
}

.patient-name {
  font-weight: 500;
}

.code-input-group {
  display: flex;
  align-items: center;
}

.code-input {
  width: 50px;
  height: 28px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 8px;
  text-align: center;
  font-size: 14px;
}

.code-separator {
  margin: 0 5px;
  color: #606266;
}

/* 表单内容 */
.form-content {
  padding: 0 40px;
}

.form-row {
  display: flex;
  margin-bottom: 20px;
  gap: 40px;
}

.form-row.full-width .form-item {
  width: 100%;
}

.form-item {
  flex: 1;
  display: flex;
  align-items: center;
}

.form-item.full-width {
  width: 100%;
}

.form-label {
  width: 120px;
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  text-align: right;
  margin-right: 15px;
}

.form-control {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-value {
  font-size: 14px;
  color: #303133;
}

.date-edit-btn {
  color: #409eff;
  padding: 4px;
}

/* 单选和多选框 */
.radio-group,
.checkbox-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.radio-item,
.checkbox-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #303133;
}

.radio-item input[type="radio"],
.checkbox-item input[type="checkbox"] {
  margin-right: 5px;
  width: 14px;
  height: 14px;
}

/* 症状部分 */
.form-section {
  margin-bottom: 30px;
}

.form-section .form-label {
  display: block;
  text-align: left;
  margin-bottom: 15px;
  margin-left: 120px;
}

.form-section .checkbox-group {
  margin-left: 120px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px 20px;
}

/* 表格样式 */
.table-section {
  margin-bottom: 30px;
  border: 1px solid #e0e4e8;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table-header {
  background-color: #f5f7fa;
  font-weight: bold;
  color: #303133;
  text-align: center;
  padding: 12px;
  border: 1px solid #e0e4e8;
}

.table-label {
  width: 150px;
  background-color: #f5f7fa;
  font-weight: 500;
  color: #303133;
  text-align: right;
  padding: 12px 15px;
  border: 1px solid #e0e4e8;
}

.table-input {
  padding: 12px 15px;
  border: 1px solid #e0e4e8;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.data-input {
  height: 28px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 14px;
}

.data-input.large-input {
  width: 200px;
}

.data-input.small-input {
  width: 60px;
}

.separator {
  color: #606266;
}

.unit {
  color: #606266;
  font-size: 12px;
  margin-right: 10px;
}

.label-text {
  color: #606266;
  margin-right: 10px;
  margin-left: 10px;
}

/* 医生选择器 */
.doctor-select {
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 14px;
  min-width: 120px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .form-section .checkbox-group {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 992px) {
  .left-panel {
    width: 180px;
  }
  
  .form-section .checkbox-group {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .table-label {
    width: 120px;
  }
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .left-panel {
    width: 100%;
    max-height: 200px;
  }
  
  .form-content {
    padding: 0 20px;
  }
  
  .form-row {
    flex-direction: column;
    gap: 15px;
  }
  
  .form-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .form-label {
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
    margin-right: 0;
  }
  
  .form-section .form-label {
    margin-left: 0;
  }
  
  .form-section .checkbox-group {
    grid-template-columns: repeat(2, 1fr);
    margin-left: 0;
  }
  
  .table-input {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>